<template>
  <div class="intro">
    <div class="intro-wrapper">
      <p>在资源板块中，将会提供各种各样的有用资源供会员下载，其中有大量的免费积分下载，也有少量的需要积分下载的资源。</p>
      <p>但是无论任何资源，所需的最高积分为5积分，所有不用担心没有足够的积分下载资源。</p>
      <p>注：每个会员每次签到都可以获取1积分。</p>
    </div>
    <div class="intro-data">
      <h2 class="title">以下是资源的信息汇总：</h2>
      <ul>
        <li v-for="(data,index) in allData" :key="data._id" @click="gotoIdPage(index,data.label)">
          <div class="list-wrapper">
            <div class="label-wrapper">
              <div class="label">{{data.label}}</div>
              <div class="author">创建者：{{data.userName}}</div>
            </div>
            <div class="tags">
              分类信息：
              <el-tag size="mini" v-for="cla in data.class" :key="cla.id">{{cla}}</el-tag>
            </div>
            <div class="time">
              <p>创建日期：{{data.created | setDate}}</p>
              <p>更新日期：{{data.updated |setDate}}</p>
            </div>
          </div>
          <div class="allNumber">
            <div class="resource">分类资源总数：{{data.resource.length}}</div>
            <p>分类总下载次数：{{data.resource | setUploadNumber}}</p>
            <p>分类下载总需积分：{{data.resource | setIntegralNumber}}</p>
            <p>分类被查看次数：{{data.resource | setShowNumber}}</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { mapActions } from "Vuex";
export default {
  name: "intro",
  data() {
    return {
      allData: []
    };
  },
  mounted() {
    this.initMethods();
  },
  filters: {
    setUploadNumber(res) {
      // 过滤器内无法直接使用Vue实例
      let allNumber = 0;
      res.forEach(num => {
        allNumber += num.downloadNumber;
      });
      return allNumber;
    },
    setIntegralNumber(res) {
      let allNumber = 0;
      res.forEach(num => {
        allNumber += num.integral;
      });
      return allNumber;
    },
    setShowNumber(res) {
      let allNumber = 0;
      res.forEach(num => {
        allNumber += num.showNumber;
      });
      return allNumber;
    }
  },
  methods: {
    gotoIdPage(index, label) {
      this.$emit("_gotoIdPage", index, label);
    },
    initMethods() {
      this.getAllResourceData({ navName: "all" })
        .then(res => {
          this.allData = res.data.data;
        })
        .catch(err => {
          console.log(err);
        });
    },
    ...mapActions("user", ["getAllResourceData"])
  }
};
</script>

<style lang="sass" scoped>
@import '@/assets/default.sass'
.intro
  width: 100%
  background-color: #fff
  padding: 2%
  .intro-wrapper
    width: 100%
    line-height: 30px
    color: #333
    border-bottom: 1px solid #eee
    >p
      @include text-overflow()
  .intro-data
    margin-top: 20px
    width: 100%
    .title
      line-height: 30px
      color: #333
    >ul
      width: 100%
      padding: 20px 0
      >li
        width: 100%
        padding: 2%
        background-color: #efefef
        cursor: pointer
        .list-wrapper
          width: 100%
          .label-wrapper
            line-height: 25px
            @include flex(space-between,center)
            .label
              font-size: 16px
              color: #333
              font-weight: 700
            .author
              color: #666
          .tags
            width: 100%
            line-height: 32px
            .el-tag
              margin-right: 10px
          .time
            width: 100%
            line-height: 30px
            @include flex(space-between,center)
        .allNumber
          width: 100%
          line-height: 30px
          @include flex(space-between,center)
        &:nth-child(even)
          background-color: #f9f9f9
</style>